<template>
	<view class="page-content">

		<view class="m-md section-bg radius-10" v-if="orderInfo">
			<view class="title-part flex-between flex-align-items p-sm p-l-md p-r-md">
				<m-icon name="donut-chart-line" :text="$t('mall-order.step-title')"></m-icon>
				<view class="flex-start flex-align-items text-secondary">
					<text class="text-xs">{{orderInfo.order_num}}</text>
					<m-icon class="m-l-sm" name="file-copy-2-line" @click="$util.copyText(orderInfo.order_num)"></m-icon>
				</view>
			</view>
			<view class="u-steps">
				<view class="warp">
					<view class="e-item flex-start"  v-for="(item,index) in orderInfo.steps" :key="index">
						<view class="dot"></view>
						<view class="info m-l-sm ">
							<view class="text-sm text-secondary" :class="{'text-success' : index == 0}">{{ item.title }}</view>
							<view class="u-line-2 p-t-xs text-xs text-auxiliary ">{{ item.desc }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="p-md" v-if="orderInfo.state == 3">
				<u-button formType="submit" @click="completeShow = true" class="main-btn" :color="'linear-gradient(20deg,'+configInfo.mainColor+','+configInfo.mainColor+'90)'" :style="{'color':configInfo.btbColor,'box-shadow': '0 5px 10px 0 '+configInfo.mainColor+'30'}" text="确认收货" :loading="actionLoading" :disabled="actionLoading" loadingText=" "></u-button>
			</view>
		</view>
		
		<view class="m-md section-bg radius-10" v-if="orderInfo.goods">
			<view class="title-part flex-between flex-align-items p-sm p-l-md p-r-md">
				<m-icon name="shopping-cart-line" :text="$t('mall.goods-title')"></m-icon>
			</view>
			<view class="p-md">
				<m-goods-list-ass :item="orderInfo.goods" :num="1"></m-goods-list-ass>
			</view>
		</view>
		
		<view class="section-bg m-md radius-10" v-if="orderInfo.info">
			<view class="title-part flex-between flex-align-items p-sm p-l-md p-r-md">
				<m-icon name="file-list-2-line" :text="$t('mall.user-title')"></m-icon>
			</view>
			<view class="order-info text-sm p-sm text-secondary">
				<view class="order-info_item m-sm flex-between">
					<view class="flex-start">
						<text class="order-info__label">{{$t('mall.order-form-item-1')}}</text>
						<text class="order-info__content">{{ orderInfo.info.fullname }}</text>
					</view>	
				</view>
				<view class="order-info_item m-sm flex-between">
					<view class="flex-start">
						<text class="order-info__label">{{$t('mall.order-form-item-2')}}</text>
						<text class="order-info__content">{{ orderInfo.info.mobile }}</text>
					</view>	
				</view>
				<view class="order-info_item m-sm flex-between">
					<view class="flex-start">
						<text class="order-info__label">{{$t('mall.order-form-item-3')}}</text>
						<text class="order-info__content">{{ orderInfo.info.add }}</text>
					</view>	
				</view>
				<view class="order-info_item m-sm flex-between">
					<view class="flex-start">
						<text class="order-info__label">{{$t('mall.order-form-item-4')}}</text>
						<text class="order-info__content">{{ orderInfo.info.remarks }}</text>
					</view>	
				</view>
			</view>
		</view>
		<m-modal
			:show="completeShow"
			:title="$t('mall-order.action-title')"
			:btn="$t('app.define-btn')"
			@btnComplete="complete"
			@close="completeShow = false"
		>
			<view class="p-md">
				<text class="text-sm">
					{{$t('mall-order.action-tips')}}
				</text>
			</view>
		</m-modal>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				id:'',// 订单id
				orderInfo:'', // 订单信息
				scrollTop:0,
				actionLoading:false,
				completeShow:false
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			steps: state => state.mall.OrderSteps,
		}),
		async onLoad(option){
			let {
				action,
				id
			} = option
			this.id = id
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			this.getOrder()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {		
			async getOrder(){
				let res = await this.$api.mall.getMallOrderInfo(this.id)
				// console.log(res)
				if(res.code == 200){
					this.orderInfo = res.data
					res.goodsInfo = res.data.goods;
				}
			},
			async complete(){
				this.actionLoading = true
				let res = await this.$api.mall.completeMallOrder({id:this.id})
				if(res.code == 200){
					this.getOrder()
					this.completeShow = false
				}
				this.actionLoading = false
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.u-steps{
		margin: 0 30rpx;
		padding: 10px 0;
		.warp{
			position: relative;
			overflow: hidden;
		}
		.e-item{
			position: relative;
			z-index: 10;
			margin-bottom: 10px;
		}
		.e-item::after{
			position: absolute;
			width: 1px;
			content: '';
			height: 100%;
			background-color:$incolor-2;
			top: 15px;
			left: 8px;
			z-index: 1;
		}
		.e-item:first-child::after,.e-item:first-child .dot{
			background-color:var(--theme-success);
		}
		.e-item:first-child .dot{
			border-color:#ddfeec;
		}
		.e-item:last-child{
			margin-bottom: 0;
		}
		.e-item:last-child::after{
			display: none;
		}
		.dot{
			position: relative;
			top: -10px;
			width: 16px;
			height: 16px;
			border-radius: 100%;
			background-color: var(--theme-text-secondary);
			border: 3px solid #fff;
			z-index: 99;
		}
		.info{
			width: 85%;
		}
	}
	.m-steps{
		// margin: 15px 30rpx;
		background-color: #fff;
		
		margin-bottom: 15px;
	}
	.order-info{
		&_item{
			// padding: 10px 30rpx;
			// margin-bottom: 10rpx;
			// color: #555;
		}
		&__label{
			width: 120rpx;
			// color: #333;
		}
		&__content{
			padding-left: 10rpx;
			font-size: 26rpx;
		}
	}
	.form{
		padding: 15px 30rpx;
		.from-item{
			// margin: 10px;
			padding: 10px 30rpx;
			margin-bottom: 10px;
			font-size: 28rpx;
			background-color: #f6f6f6;
			flex-wrap: nowrap;
		}
		.form-label{
			width: 65px;
			text-align: right;
			margin-right: 10px;
		}
		.input-inline{
			width: 200px;
		}
		.input{
			font-size: 28rpx;
		}
		.btn{
			margin-top: 25px;
			width: 100%;
			background-color: $maincolor-1;
		}
	}
</style>
